<template>
  <div id="userList">


    <div>
      <!-- 用来条件查询的 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input v-model="ruleForm.phoneNumber"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>

        <el-form-item label="身份证号" prop="idNum">
          <el-input v-model="ruleForm.idNum"></el-input>
        </el-form-item>

        <!-- 0 系统管理员
           1 岗位操作人员
           2 技术管理人员 -->
        <!--TODO 角色ID应与后端对应-->
        <el-form-item label="人员角色" prop="roleId">
          <!--        <el-checkbox-group v-model="ruleForm.roleId">-->
          <!--          <el-checkbox label="0" name="type" value="0">系统管理员</el-checkbox>-->
          <!--          <el-checkbox label="1" name="type" value="1">岗位操作人员</el-checkbox>-->
          <!--          <el-checkbox label="2" name="type" value="2">技术管理人员</el-checkbox>-->
          <!--        </el-checkbox-group>-->
          <el-select v-model="ruleForm.role" clearable placeholder="请选择">
            <el-option
                v-for="item in userListOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">搜索</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        :data="tableData"
        border>
      <el-table-column
          fixed
          prop="userId"
          label="编号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="username"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="phoneNumber"
          label="手机号码"
          width="120">
      </el-table-column>
      <el-table-column
          prop="role"
          label="角色"
          width="120">
      </el-table-column>
<!--      <el-table-column-->
<!--          fixed="right"-->
<!--          label="操作"-->
<!--          width="120">-->
      <el-table-column

          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="delete_user(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="size"
        :total="total"
        @current-change="page">
    </el-pagination>
  </div>
</template>

<script>
export default {
  created() {
    //TODO 传回的角色信息是id还是直接传回字符串？跟学姐再商量一下
    // 传回的是ID
    this.tableData = [
      {
        userId: "1",
        username: "张三",
        phoneNumber: "11111111111",
        role: "系统管理员"
      },
      {
        userId: "2",
        username: "武诗淇",
        phoneNumber: "13623518153",
        role: "系统管理员"
      },
      {
        userId:"3",
        username:"李四",
        phoneNumber:"12222229999",
        role:"岗位操作人员"
      }
    ]
    // TODO 所有的请求的baseURL还没有改（还没有加）

  },
  data() {
    return {
      ruleForm: {
        username: '',
        phoneNumber: '',
        email: '',
        idNum: '',
        role:''
      },
      total: null,
      tableData: null,
      size: null,
      // 0：系统管理员 1：岗位操作员 2：技术人员
      userListOptions:[
        {
          value: '0',
          label: '系统管理员'
        },
        {
          value: '1',
          label: '岗位操作员'
        },
        {
          value: '2',
          label: '技术人员'
        }
      ],
    }
  },
  methods: {
    submitForm(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('/user/list', {
            pageNum: 1,
            pageSize: 6,
            username: _this.ruleForm.username,
            phoneNumber: _this.ruleForm.phoneNumber,
            email: _this.ruleForm.email,
            idNum: _this.ruleForm.idNum
          }).then(function (resp) {
            _this.tableData = resp.data;
            _this.total = resp.data.totalElements
            _this.size = resp.data.pageable.pageSize
          })
        } else {
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    edit(row) {
      this.$router.push({
        path: '/userUpdate',
        query: {
          userId: row.userId
        }
      })
    },
    delete_user(row) {
      const _this = this;
      axios.delete("/user/delete" + row.userId).then(function (resp) {
        _this.$alert(row.userId + "删除成功！", "删除成功", {
          confirmButtonText: '确定',
          callback: action => {
            window.location.reload()
          }
        })
      })
    },
    page(currentPage) {
      const _this = this
      // axios.get('/' + currentPage + '/6').then(function (resp) {
      //   _this.tableData = resp.data.content
      //   _this.total = resp.data.totalElements
      //   _this.size = resp.data.pageable.pageSize
      // })
      var form = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: _this.ruleForm.username,
        phoneNumber: _this.ruleForm.phoneNumber,
        email: _this.ruleForm.email,
        idNum: _this.ruleForm.idNum
      }
      axios.post('/user/list', form).then(function (resp) {
        _this.tableData = resp.data.content
        _this.total = resp.data.totalElements
        _this.size = resp.data.pageable.pageSize
      })
    }
  }
}
</script>

<style scoped>
.el-input{
  width: 130px;
}

.el-select{
  width: 130px;
}

.el-table{
  width: min-content;
}
</style>